<template>
  <div>
    <div class="TWODIV">
      <span class="title">手机</span>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/phone/phone.png" alt />
        </dt>
        <dd>
          <my-list :listData="cellphone"></my-list>
        </dd>
      </dl>
    </div>
    <div class="TWODIV">
      <span class="title">家电</span>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png" alt />
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png" alt />
        </dt>
        <dd>
          <my-list :listData="appliances"></my-list>
        </dd>
      </dl>
    </div>
    <div class="TWODIV">
      <span class="title">配件</span>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png" alt />
          <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png" alt />
        </dt>
        <dd>
          <my-list :listData="accessories"></my-list>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
import API from "../api/homeApi";
export default {
  data() {
    return {
      cellphone: [],
      appliances: [],
      accessories: []
    };
  },
  created() {
    this.callsFig();
  },
  methods: {
    async callsFig() {
      let res = await API.getHotProduct({ categoryName: ["手机"] });
      let ress = await API.getHotProduct({
        categoryName: ["电视机", "空调", "洗衣机"]
      });
      let resss = await API.getHotProduct({
        categoryName: ["保护套", "保护膜", "充电器", "充电宝"]
      });
      this.cellphone = res.Product;
      this.accessories = resss.Product;
      this.appliances = ress.Product;
      console.log(this.cellphone);
    }
  }
};
</script>
<style lang="scss" scoped>
.TWODIV {
  display: flex;
  flex-direction: column;
}
.title {
  float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  margin-left: 78px;
}
dl {
  display: flex;
  width: 90%;
  height: 735px;
  margin: auto;
  background-color: #e9eef3;

  dt {
    height: 100%;
    width: 20%;
    display: flex;
    flex-direction: column;
    img {
      padding-bottom: 23px;
      width: 276px;
      // height: 357px;
    }
  }
  dd {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    ul {
      width: 100%;
      height: 103%;
      padding: 0;
      justify-content: space-between;
      flex-wrap: wrap;
      display: flex;
      li:hover {
        transform: translateY(-5px);
        box-shadow: 0px 0px 15px #b0b0b0;
      }
      li {
        margin-left: 20px;
        background: white;
        width: 23%;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        align-items: center;
        justify-content: center;
        a {
          font-size: 18px;
          color: #333;
          text-decoration: none;
          font-weight: bold;
        }
        img {
          width: 210px;
          height: 210px;
        }
        .oneP {
          font-size: 12px;
          color: #b0b0b0;
        }
        p {
          margin-top: 14px;
          .oneSpan {
            color: red;
            margin-right: 13px;
          }
          .twoSpan {
            text-decoration: line-through;
            color: #b0b0b0;
          }
        }
      }
    }
  }
}
</style>